<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="referrer" content="never">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="A simple jQuery image cropping plugin.">
  <meta name="author" content="Chen Fengyuan">
  <title>Cropper</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/cropper.css">
  <link rel="stylesheet" href="css/main.css">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<style type="text/css">
	#image{
		width: 100%;
		height: 300px!important;
	}
	.cropper-drag-box,.cropper-wrap-box{
	width: 100%!important;
	height: 300px!important;	
	}
	
	.btn-group {
		width: 100%;
		margin-top: 30px;
	}
	.btn-group button{
		width: 100%;
		background: red;
	}
</style>

<body>


  <!-- Content -->
  <div class="container">
    <div class="row">
      <div class="col-md-9">
        <!-- <h3>Demo:</h3> -->:
		<!-- //显示的图片 -->
        <div class="img-container">
          <img id="image" src="" >
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-9 docs-buttons">
        <!-- <h3>Toolbar:</h3> -->

        <div class="btn-group btn-group-crop">
          <button type="button" class="btn btn-primary" data-method="getCroppedCanvas">
            <span class="docs-tooltip"   data-toggle="tooltip" title="$().cropper(&quot;getCroppedCanvas&quot;)">
              截取头像
            </span>
          </button>
        </div>

        <!-- Show the cropped image in modal -->
        <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="getCroppedCanvasTitle">裁剪成功</h4>
              </div>
              <div class="modal-body"></div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">完成</a>
              </div>
            </div>
          </div>
        </div><!-- /.modal -->

       
      </div><!-- /.docs-buttons -->
      <div class="col-md-3 docs-toggles">
        <!-- <h3>Toggles:</h3> -->
        <div class="btn-group btn-group-justified" data-toggle="buttons">
   <!--       <label class="btn btn-primary active">
            <input type="radio" class="sr-only" id="aspectRatio0" name="aspectRatio" value="1.7777777777777777">
            <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 16 / 9">
             示例
            </span>
          </label> -->
     <!--     <label class="btn btn-primary">
            <input type="radio" class="sr-only" id="aspectRatio1" name="aspectRatio" value="1.3333333333333333">
            <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 4 / 3">
              4:3
            </span>
          </label> -->
          <label class="btn btn-primary">
            <input type="radio" class="sr-only" id="aspectRatio2" name="aspectRatio" value="1">
            <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 1 / 1">
         截取选择的部分作为头像
            </span>
          </label>
       <!--   <label class="btn btn-primary">
            <input type="radio" class="sr-only" id="aspectRatio3" name="aspectRatio" value="0.6666666666666666">
            <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 2 / 3">
              2:3
            </span>
          </label>
          <label class="btn btn-primary">
            <input type="radio" class="sr-only" id="aspectRatio4" name="aspectRatio" value="NaN">
            <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: NaN">
              Free
            </span>
          </label> -->
        </div>

      </div><!-- /.docs-toggles -->
    </div>
  </div>



  <!-- Scripts -->
  <script src="js/jquery-3.1.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://fengyuanchen.github.io/js/common.js"></script>
  <script src="js/cropper.js"></script>
  <script src="js/main.js"></script>
 <script src="js/mui.js"></script>
  <script type="text/javascript">
	  
	      mui.init({
                    beforeback: function() {　　　　
                        var list = plus.webview.currentWebview().opener();　　　　
                        //refresh是A页面自定义事件
                        mui.fire(list, 'refresh');
                        //返回true,继续页面关闭逻辑
                        return true;
                    },
           });

	   
	  
     //点击完成   截图完成
	  mui(".modal-footer").on("tap", ".btn-primary", function(){
					mui.back()
				})

	  
			 	mui.plusReady(function () {
			 	 var web=plus.webview.currentWebview();
			   var  path=web.pathd;
				// var  imgs=document.getElementById('image');
				// imgs.src=path;  
				$("#image").attr("src",path);
				
				
				
			 })
			     
	 
	 
	 


  </script>
  
</body>
</html>
